<template>
	<el-popover 
		v-model="showPopover" 
		:disabled="disabled" 
		placement="bottom" 
		width="700"
		popper-class="no-padding-popover" 
		trigger="click">
		
		<!-- 点击加载弹出框 -->
		<crm-relative
			v-if="!disabled&&showSelectView" 
			ref="crmrelative"
			:crm-type="crmType"
			:radio="radio"
			:id="id"
			:actiontype="item.actiontype"
			@close="showPopover=false"
			@changeCheckout="checkInfos"/>
		
		<!-- 显示框 -->
		<flexbox
			slot="reference"
			:class="[disabled ? 'is_disabled' : 'is_valid']"
			wrap="wrap"
			class="user-container"
			@click.native="contentClick">
			<div
				v-for="(aitem, aindex) in dataValue"
				:key="aindex"
				class="user-item"
				@click.stop="deleteinfo(aindex)">
				{{ aitem.name }}
				<i class="delete-icon el-icon-close"/>
			</div>
			<div
				v-if="dataValue.length == 0"
				class="add-item">+添加</div>
		</flexbox>
		
	</el-popover>
</template>
<script type="text/javascript">
	import arrayMixin from './arrayMixin'
	import CrmRelative from './CrmRelative'
	export default {
		name: 'CrmRelativeCell', // 相关模块CRMCell
		components: {
			CrmRelative
		},
		mixins: [arrayMixin],
		props: {
			/** 多选框 只能选一个 */
			radio: {
				type: Boolean,
				default: true
			},
			// CRM类型
			crmType: {
				type: String,
				default: ''
			},
			// id
			id: {
				type: [String,Number],
				default: ''
			},
		},
		data() {
			return {
				showPopover: false, // 展示popover
				showSelectView: false, // 内容
			}
		},
		mounted() {
			
		},
		methods: {
			// 点击
			contentClick() {
				this.showSelectView = true
			},
			
			/** 选中 */
			checkInfos(data) {
				this.dataValue = data.data ? data.data : []
				this.$emit('value-change', {
					index: this.index,
					value: data.data,
					type:this.crmType
				})
			},
			/** 删除 */
			deleteinfo(index) {
				if (this.disabled) return
				if (this.radio && this.$refs.crmrelative) {
					// 如果单选告知删除
					this.$refs.crmrelative.clearAll()
				}
				if (this.dataValue.length === 1) {
					this.dataValue = []
				} else {
					this.dataValue.splice(index, 1)
				}
			
				this.$emit('value-change', {
					index: this.index,
					value: this.dataValue,
					type:this.crmType
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.user-container {
		min-height: 34px;
		position: relative;
		border-radius: 3px;
		font-size: 12px;
		border: 1px solid #ddd;
		color: #333333;
		padding: 5px;
		line-height: 18px;
		width: 200px;

		.user-item {
			padding: 5px;
			background-color: #e2ebf9;
			border-radius: 3px;
			margin: 3px;
			cursor: pointer;
		}

		.add-item {
			padding: 5px;
			color: #3e84e9;
			cursor: pointer;
		}

		.delete-icon {
			color: #999;
			cursor: pointer;
		}
	}

	.user-container.is_disabled {
		background-color: #f5f7fa;
		border-color: #e4e7ed;
		cursor: not-allowed;

		.user-item {
			background-color: #f0f4f8ea;
			color: #c0c4cc;
			cursor: not-allowed;
		}

		.delete-icon {
			color: #c0c4cc;
			cursor: not-allowed;
		}

		.add-item {
			color: #c0c4cc;
			cursor: not-allowed;
		}
	}

	.user-container.is_valid:hover {
		border-color: #c0c4cc;
	}
</style>
